<template>
    <div>
      <v-layout class="px-3 pb-2">
        <v-flex xs2>
          <v-btn color="info" @click="addBrand">新增品牌</v-btn>
        </v-flex>
        <v-spacer/>
        <v-flex xs4>
          <v-text-field label="搜索" hide-details append-icon="search" v-model="key"/>
        </v-flex>
      </v-layout>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center"><img :src="props.item.image" alt=""></td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
            <v-btn flat icon color="info">
              <v-icon>edit</v-icon>
            </v-btn>
            <v-btn flat icon color="error">
              <v-icon>delete</v-icon>
            </v-btn>
          </td>
        </template>
      </v-data-table>

      <v-dialog v-model="show" max-width="600" scrollable v-if="show">
        <v-card>
          <v-toolbar dark dense color="primary">
            <v-toolbar-title>{{isEdit ? '修改品牌' : '新增品牌'}}</v-toolbar-title>
            <v-spacer/>
            <v-btn icon @click="show = false">
              <v-icon>close</v-icon>
            </v-btn>
          </v-toolbar>
          <v-card-text class="px-5 py-2">
            <!-- 表单 -->
            <brand-form :oldBrand="brands" :isEdit="isEdit" @close="show = false" :reload="getDataFromApi"/>
          </v-card-text>
        </v-card>
      </v-dialog>
    </div>

</template>

<script>
    export default {
        name: "MyBrand",
        data(){
          return{
            headers:[
              {text: '品牌id', value: "id", align: 'center', sortable: true},
              {text: '品牌名称', value: "name", align: 'center', sortable: true},
              {text: '品牌LOGO', value: "image", align: 'center', sortable: true},
              {text: '品牌首字母', value: "letter", align: 'center', sortable: true},
              {text: '操作', align: 'center', sortable: false},
            ],
            brands:[],// 品牌信息
            pagination:{},
            totalBrands: 0,
            loading: false,
            key:"",//搜索条件
            show: false,// 是否弹出窗口
            isEdit: false // 判断是编辑还是新增
          }
        },
      created() {
          this.brands = [
            {id: 1,name: "小米1",image: "1.jpg",letter: "O"},
            {id: 2,name: "小米2",image: "2.jpg",letter: "F"},
            {id: 3,name: "小米3",image: "3.jpg",letter: "G"},
            {id: 4,name: "小米4",image: "4.jpg",letter: "D"},
            {id: 5,name: "小米5",image: "5.jpg",letter: "B"}
          ];
          this.totalBrands = 15;

          //去后台查询
          this.loadBrands();
      },
      watch:{
          key(){
            this.pagination.page = 1;
            this.loadBrands();// 我觉得这个还是需要的
          },
          pagination:{
            deep: true,
            handler(){
              this.loadBrands();
            }
          }
      },
      methods:{
          addBrand(){
            //把brand变为{}
            this.brands = {};
            //修改标记
            this.isEdit = false;
            //控制弹窗可见
            this.show = true;
          },
          loadBrands(){
            this.loading = true;
            this.$http.get("/item/brand/page",{
              params:{
                page: this.pagination.page, //当前页
                rows: this.pagination.rowsPerPage,  //每页数量
                sortBy: this.pagination.sortBy,   //排序字段
                desc: this.pagination.descending,   //是否降序
                key: this.key             //搜索条件
              }
            }).then(resp => {
              console.log(resp);
              this.brands = resp.data.items;
              this.totalBrands = resp.data.total;
              this.loading = false;
            })
          },
        getDataFromApi() {
          this.loading = true;
          // 200ms后返回假数据
          window.setTimeout(() => {
            this.items = brandData.slice(0,4);
            this.totalItems = 100
            this.loading = false;
          }, 200)
        }
      }
    }
</script>

<style scoped>

</style>
